<template>
  <div class="com-container" @dblclick="revertMap">
    <div class="com-chart" ref='map_ref'></div>
  </div>
</template>

<script>

import axios from 'axios'
// 引入汉字转拼音的工具方法
import {getProvinceMapInfo} from '@/utils/map_utils'
import {mapState} from 'vuex'
export default {
  data() {
    return {
      chartInstance:null, //图表实例
      allData:null, //保存请求到的数据
      mapData:{} //所获取的地图省份数据
    }
  },
  created() {
    //在组件创建的时候进行webSocket回调函数的注册
    this.$socket.registerCallBack('mapData',this.getData)
  },
  mounted() {
    this.initChart()
    // this.getData()
    window.addEventListener('resize',this.screenAdapter)
    this.screenAdapter()
    //使用websocket发送给服务器
    this.$socket.send({
      action:'getData',
      socketType:'mapData',
      chartName:'map',
      value:''
    })
  },
  destroyed() {
    window.removeEventListener('resize',this.screenAdapter)
    //在组件销毁的时候进行webSocket回调函数的取消
    this.$socket.unRegisterCallBack('mapData')
  },
  computed:{
    ...mapState(['theme'])
  },
  watch:{
      theme(){
          this.chartInstance.dispose()  //销毁图表
          this.initChart()  //以最新的主题初始化图表
          this.screenAdapter()  //重新适配屏幕
          this.updateChart()  //更新数据
      }
  },
  methods: {
    async initChart(){
      this.chartInstance = this.$echarts.init(this.$refs.map_ref,this.theme)
      //获取中国地图矢量数据，位于 public/static/map/china.json
      const ret = await axios.get('http://localhost:8999/static/map/china.json')
      this.$echarts.registerMap('china',ret.data)
      const initOption = {
        title:{
          text:'▎商家发布',
          left:20,
          top:20
        },
        geo:{
          type:'map',
          map:'china',
          top:'5%',
          bottom:'5%',
          itemStyle:{
            areaColor:'#2E72BF',
            borderColor:'#333'
          }
        },
        legend:{
          left:'5%',
          bottom:'5%',
          orient:'vertical'
        }
      }
      this.chartInstance.setOption(initOption)

      //地图鼠标点击事件
      this.chartInstance.on('click', async arg=>{
        const provinceInfo = getProvinceMapInfo(arg.name)
        // console.log(provinceInfo);
        // 获取省份的矢量地图数据
        //判断当前要获取的省份是否存在mapData中
        if(!this.mapData[provinceInfo.key]){
          const ret = await axios.get('http://localhost:8999' + provinceInfo.path)
          this.mapData[provinceInfo.key] = ret.data
          this.$echarts.registerMap(provinceInfo.key,ret.data)
        }
        const changeOption = {
          geo:{
            map: provinceInfo.key
          }
        }
        this.chartInstance.setOption(changeOption)
      })
    },
    getData(ret){
      // const {data: ret } = await this.$http.get('map')
      this.allData = ret
      this.updateChart()
    },
    updateChart(){
      //处理图表的数据
      //图例的数据
      const legendArr = this.allData.map(item=>{
        return item.name
      })
      const seriesArr = this.allData.map(item => {
        // return的对象代表一个类别下的所有散点数据
        //如果想要在地图中显示散点的数据，需要给散点的图表增加一个配置，coordinateSystem:geo
        return {
          type:'effectScatter',
          rippleEffect:{
            scale:5,
            brushType:'stroke'
          },
          name:item.name,
          data:item.children,
          coordinateSystem:'geo'
        }
      })
      const dataOption = {
        legend:{
          data:legendArr
        },
        series:seriesArr
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter(){
      const titleFontSize = this.$refs.map_ref.offsetWidth  / 100 * 3.6
      const adapterOption = {
        title:{
          textStyle:{
            fontSize:titleFontSize
          }
        },
        legend:{
          itemWidth:titleFontSize / 2,
          itemHeight:titleFontSize / 2,
          itemGap:titleFontSize / 3,
          textStyle:{
            fontSize:titleFontSize / 2
          }
        }
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
    //双击返回中国地图
    revertMap(){
      const revertOption = {
        geo:{
          map:'china'
        }
      }
      this.chartInstance.setOption(revertOption)
    }
  }
}
</script>

<style lang='less' scoped>

</style>